import 'package:demo/base/app_color.dart';
import 'package:demo/base/app_size.dart';
import 'package:demo/base/app_text.dart';
import 'package:demo/pages/home/home_controller.dart';
import 'package:demo/route/route.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomePage extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(AppSize.none),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              appBar(),
              contentWiget(),
              Expanded(child: Container()),
              actinBtn(
                "Try Now Free",
                "Limited access of filters",
                "assets/images/btn_blue_bac.png",
                action: () => AppRoute.push(RouteNames.second),
              ),
              SizedBox(height: AppSize.normal.h),
              actinBtn(
                "Buy Premium Now",
                "Get unlimited access to all filters",
                "assets/images/btn_yellow_bac.png",
                action: () => AppRoute.push(RouteNames.second),
              ),
              SizedBox(height: 80.h),
            ],
          ),
        ),
      ),
    );
  }

  appBar() {
    return Padding(
      padding: EdgeInsets.only(
        top: 100.h,
        left: AppSize.large.w,
      ),
      child: InkWell(
        onTap: () => AppRoute.push(RouteNames.second),
        child: Image.asset(
          "assets/images/more.png",
          width: 40.w,
          height: 40.w,
        ),
      ),
    );
  }

  contentWiget() {
    return Padding(
      padding: EdgeInsets.fromLTRB(
        AppSize.xxLarge.w,
        AppSize.large.h,
        AppSize.xxLarge.w,
        AppSize.none,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AppText.h1(
            "Virtual",
            color: AppColors.darkBlack(),
          ),
          AppText.h1(
            "Hair Color",
            color: AppColors.darkBlack(),
          ),
          AppText.h4(
            "AI Camera App",
            color: AppColors.lightBlack(),
          ),
          SizedBox(height: AppSize.large.h),
          AppText.largeLabel(
            "It's time for change! Try a new hair shade has never been easier! have a fun with this app you can choose best hair color for yourself with our AI technology.",
            color: AppColors.lightBlack(),
            maxLines: 10,
          ),
        ],
      ),
    );
  }

  actinBtn(
    String title,
    String deTitle,
    String bacImgPath, {
    required VoidCallback action,
  }) {
    return InkWell(
      onTap: () => action(),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: AppSize.large.w),
        height: (AppSize.screenWidth - 2 * AppSize.large.w) * 90 / 296,
        child: Stack(
          alignment: Alignment.center,
          fit: StackFit.expand,
          children: [
            Positioned(
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
              child: Image.asset(
                bacImgPath,
                fit: BoxFit.fitWidth,
              ),
            ),
            Positioned(
              left: 0,
              right: 0,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: AppSize.xxLarge.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        AppText.h2(
                          title,
                          color: Colors.white,
                        ),
                        AppText.label(
                          deTitle,
                          color: Colors.white,
                        ),
                      ],
                    ),
                    Icon(
                      Icons.navigate_next,
                      color: Colors.white,
                      size: 100.w,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
